<template>
    <div class="student" v-if="isShow">
        <!-- 轮播图片 -->
        <div class="sutdent_img">
            <el-carousel :interval="3000" type="card" height="250px" class="lb">
                <!--修改 lbList数据-->
                <el-carousel-item v-for="item in lbList" :key="item" style="width: 600px;">
                    <el-image style="width: 100%; height: 100%" :src="item" fit="fill" />
                </el-carousel-item>
            </el-carousel>
        </div>
        <div style="width: 90%;">
            <h3 style="margin-left: 60px;">校园头条</h3>
            <div class="content">
                <el-card style="max-width: 50%" class="card_style" v-for="it in titleList" :kye="it.title_id" @click="goTo(it.title_id)">
                    <div class="card_content">
                        <div class="card_img">
                            <el-image style="width: 100%; height: 100%;border-radius: 10px" :src="it.title_img"
                                fit="fit" />
                        </div>
                        <div class="card_tent">
                            <div style="margin-left: 30px;">
                                <h3>{{ it.title }}</h3>
                                <p>{{ it.title_content }}</p>
                                <span style="font-size: 12px;color: #eee">时间:{{(it.title_time)}}</span>
                            </div>
                           
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
    <div v-else>
        <TitleDateils :id="TtileId"></TitleDateils>
    </div>
</template>

<script setup>
import { getHomeInfo } from "@/api/student/home"

import { ElNotification } from "element-plus";
import { onMounted, ref } from "vue"
import TitleDateils from "@/views/directives/component/TitleDateils.vue";
const lbList = [
    "../../../../public/img/图片1.png",
    "../../../../public/img/图片3.png",
    "../../../../public/img/图片2.png",
    "../../../../public/img/图片3.png",
    "../../../../public/img/水电管理流程图.jpg",
    "../../../../public/img/图片2.png",
]
const titleList = ref([]);
const isShow = ref(true)
const TtileId = ref('');
// console.log(dayjs('2024-04-09T11:34:25.000Z','YYYY-MM-DD'))
const getTitle = async () => {
    try {
        const res = await getHomeInfo();
        if (res.data.code === 200) {

            titleList.value = [...res.data.data].slice(0,2)
            // console.log(res.data.data)
        } else {
            ElNotification({
                message: "获取信息失败 ",
                type: "error",
                duration: 3000
            });
        }
    } catch (error) {
        console.log(error)
    }
}
const goTo = (id)=>{
    TtileId.value = id;
	debugger
	isShow.value = false;
}
onMounted(() => {
    getTitle()
})
</script>

<style scoped lang="scss">
.student {
    .sutdent_img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .lb {
        width: 90%;
    }

    width: 100%;
    height: 00px;

    .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }

    .content {
        width: 100%;
        margin-left: 60px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .card_style {
            width: 49%;
            height: 200px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .card_content {
                width: 90%;
                margin: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .card_img {
                    border-radius: 5px;
                    width: 40%;
                    height: 100%;
                }
            }
        }
    }
}
</style>
